<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${questionInformation.title}"></title>
    <script th:src="@{/js/blog.js}"></script>
    <script th:src="@{/js/moment.js}"></script>
    <link rel="stylesheet" th:href=" @{/css/bootstrap.min.css }">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/editormd.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/lib/marked.min.js}" ></script>
    <script th:src="@{/js/lib/prettify.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="application/javascript"></script>
</head>
<body>
<div th:insert="~{header.html :: nav}"></div>
<div class="container-fluid main-color">
    <div class="row main main-color">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 main-left">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <h3><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>&nbsp;&nbsp;问题详情</h3>
                <h4><span class="label label-danger">悬赏:<span th:text="${questionInformation.money}"></span>元</span>&nbsp;&nbsp;
                </h4>
                <hr>
                <div class="media main-built" th:each="question : ${questionInformation}">
                    <h4 class="media-heading" th:text="${questionInformation.title}"></h4></a>
                    <span class="text-desc aw-question-content"><span
                            th:text="*{questionInformation.commentCount} "></span>个回复 · <span
                            th:text="*{questionInformation.viewCount} "></span>次浏览
                    ·创建时间：<span
                                th:text="${#dates.format(questionInformation.gmtCreat,'yyyy-MM-dd HH:mm')}"></span><span>&nbsp;&nbsp;&nbsp;发起人：<span
                                th:text="${questionInformation.user.name}"></span></span></span>
                    <!--标签-->
                    <br>
                    <div class="question_tag" th:each="tag : ${questionInformation.tag.split('，')}">
                        <span class="label label-info " th:text="${tag}"></span>
                        </span>
                    </div>
                    <hr>
                    <!--问题详情-->
                    <div  id="question-view">
                        <textarea style="display:none;" th:text="${questionInformation.description}">
                        </textarea>
                    </div>
                    <script type="text/javascript">
                        $(function() {
                            var testView = editormd.markdownToHTML("question-view", {
                            });
                        });
                    </script>
                </div>
            </div>
            <!--评论回复详情-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <h4><span class="media-heading" th:text="${questionInformation.commentCount}"></span>个回复</h4>
                <hr style="margin:0px;background-color:#eee;height:0.5px;border:none;"/>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 " th:each="comment:${comments}">
                    <div class="media-left ">
                        <a href="#">
                            <img class="media-object avatar" th:src="${comment.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body  userName ">
                        <span th:text="${comment.user.name}" class="comment_username"></span><br>
                        <span th:text="${comment.content}" style="font-size: 16px"></span>
                        <br>
                        <div class="menu">
                            <span class="glyphicon glyphicon-thumbs-up comment_button  " aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-thumbs-down comment_button" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-comment comment_button " aria-hidden="true"
                                  th:data-id="${comment.id}" onclick="collapseComments(this)">(<span
                                    th:text="${comment.commentCount}"></span>)</span>
                            <span th:text="${#dates.format(comment.getGmtCreat(),'yyyy-MM-dd HH:mm')}"
                                  style="float: right"></span>
                        </div>
                    </div>
                    <!--二级评论-->
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment_two_list_frame demo_line_04 collapse "
                         th:id="${'comment-'+comment.id}">
                        <div class="form-group  col-lg-12 col-md-12 col-sm-12 col-xs-12 comment_two_list">
                            <br>
                            <input type="text" class="form-control " id="title" name="title" placeholder="请输入回复内容"
                                   th:id="${'input-'+comment.id}"><br>
                            <button type="submit" class="btn btn-success" style="float: right" onclick="comment(this) "
                                    th:data-id="${comment.id}">回复
                            </button>
                        </div>
                    </div>

                    <br>
                </div>
            </div>
            <!--评论功能-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <input type="hidden" id="question_id" th:value="${questionInformation.id}">
                <textarea class="form-control" rows="6" id="comment_content"></textarea>
                <br>
                <button type="submit" class="btn btn-success " style="float: right" onclick="post()">回复</button>
            </div>
        </div>
        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 main-right">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object avatar img-circle" th:src="${questionInformation.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body userName">
                        <span th:text="${questionInformation.user.name}"></span>
                    </div>
                    <h4>test</h4>
                    <h4>test</h4>
                    <h4>test</h4>
                    <h4>test</h4>
                    <h4>test</h4>
                </div>
            </div>
        </div>

    </div>
</div>
<div th:insert="~{footer.html :: footer}"></div>
</body>
</html>